/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from 'react'
import { ConfigProvider } from 'antd'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import 'moment/locale/zh-cn'
import { withRouter } from 'react-router-dom'
import {
    Input,
    Form,
    Button,
    Select,
    DatePicker,
    Table
} from "antd"

const { Option } = Select
const { RangePicker } = DatePicker

const dataSource = [
    {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
    },
    {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
    }
]
  
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
]

function procurement (props) {
    const [headForm] = Form.useForm()
    // 初始化表单数据
    let [selectingData, setSelectingData] = useState({
        id: '',
        provider: '',
        store: '',
        producer: '',
        status: '',
        date: ''
    })
    // 初始化表格数据

    // 提交表单
    const onFinish = (value) => {
        setSelectingData({...value, date: Reflect.get(selectingData, 'date')})
    }
    // 确定时间
    function onChangeTime (_, dateString = []) {
        if (!dateString.length) {
            return
        }
        Reflect.set(selectingData, 'date', dateString)
        setSelectingData(selectingData)
    }

    useEffect(() => {
        console.log(selectingData)
    }, [selectingData])
    
    return (
        <div style={{ backgroundColor: "#fff" }}>
            <div style={{ padding: "16px", borderBottom: "1px solid #dcdfe6" }}>
                <Form
                form={ headForm }
                layout="inline"
                onFinish={ onFinish }
                >
                    <Form.Item name="id" label="采购单号" style={{ marginBottom: '20px'}}>
                        <Input placeholder="请输入" allowClear></Input>
                    </Form.Item>

                    <Form.Item name="provider" label="供应商">
                        <Input placeholder="请输入" allowClear></Input>
                    </Form.Item>

                    <Form.Item name="store" label="配送仓库">
                        <Select style={{ width: 200 }}  placeholder="请选择">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="producer" label="制单人">
                        <Input placeholder="请输入" allowClear></Input>
                    </Form.Item>
                    
                    <Form.Item name="status" label="状态">
                        <Select style={{ width: 200 }}  placeholder="请选择">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="date" label="制单日期">
                            <ConfigProvider locale={ zh_CN }> 
                                <RangePicker onChange={ onChangeTime }/>
                            </ConfigProvider>
                    </Form.Item>

                    <Form.Item style={{ marginLeft: '20px'}}>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                    
                    <Form.Item>
                        <Button htmlType="reset" onClick={ () => selectingData.date = ''}>
                            重置
                        </Button>
                    </Form.Item>

                    <Form.Item  style={{ marginLeft: '60px'}}>
                        <Button type="primary" onClick={ () =>  props.history.push('/procurement/order') }>
                        生成采购订单
                        </Button>
                    </Form.Item>
                </Form>
            </div>

            <div style={{ marginTop: '20px', padding: "16px" }}>
                <Table 
                    dataSource={ dataSource } 
                    columns={ columns } 
                    pagination={{ 
                        current: 1,
                        total: 1000
                    }}
                />
            </div>
        </div>
    )
}

export default withRouter(procurement)